<template>
  <van-pull-refresh class="home-main" v-model="refreshing" @refresh="onRefresh">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
      v-for="(item, index) in swipData"
      :key="index">
      <img :src="item.img">
      </van-swipe-item>
    </van-swipe>
    <!-- 菜单列表 -->
    <van-grid column-num="4">
      <van-grid-item icon-size="40px"
      v-for="(item,index) in menusData"
      :key="index"
      :icon="item.img" :text="item.info[0].value" />
    </van-grid>
    <!-- 公告栏 -->
    <van-notice-bar left-icon="fire-o" :scrollable="false">
      <span>热点资讯公告:</span>
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :touchable="false"
        :show-indicators="false"
      >
        <van-swipe-item
        v-for="(item,index) in newsData"
        :key="index"
        v-text="item.chiild[0].val"></van-swipe-item>      
      </van-swipe>
    </van-notice-bar>
    <!-- 商品列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="initProducts">
      <product-list
        :products-data="productsData">
      </product-list>
    </van-list>
  </van-pull-refresh>
</template>
<script setup>
import { PullRefresh as VanPullRefresh, Swipe as VanSwipe, SwipeItem as VanSwipeItem, 
  Grid as VanGrid, GridItem as VanGridItem, NoticeBar as VanNoticeBar,
  List as VanList } from 'vant'
import { getProductsData } from '@/api/product.js'
import { getDefaultData } from '@/api/home.js'
import { computed } from '@vue/reactivity';
import { ref } from 'vue';
import productList from '@/components/productList.vue'



// 存储首页的所有数据(声明响应式数据)
const indexData = ref({})
// 封装请求数据函数
const initIndexData = async () => {
  const { data } = await getDefaultData()
    // console.log(data)
    if (data.status!==200) {
      return
    }
  indexData.value = data.data

  // 下拉菜单加载完毕,将下拉刷新的状态更改为完成
  refreshing.value = false
}
initIndexData()
// 通过计算属性保存需要的数据
// 保存轮播图的数据
const swipData = computed(() => {
  return indexData.value.swiperBg?.default.imgList.list
})
//保存菜单列表的数据
const menusData = computed(() => {
  return indexData.value.menus?.default.imgList.list
})
// 保存公告信息
const newsData = computed(() => {
  return indexData.value.news?.default.newList.list
})




// 存储商品列表信息
const productsData = ref([])
const loading = ref(false)
const finished = ref(false)
// 定义显示的页数
let page = 1
let limit = 4
// 请求指定页数的商品列表的数据
const initProducts = async () => {
  const { data } = await getProductsData({
    page,
    limit
  })
  // console.log(data)
  if (data.status !== 200){ return }
  productsData.value.push(...data.data)
  
  // 第一次加载之后将加载状态变为false
  loading.value = false



  // 下次请求增加页数
  page++
  if (data.data.length < limit){
    finished.value = true
    return
  }
}
//  list组件会触底加载首屏及后面的数据
// initProducts() 





// -----下拉刷新功能
const refreshing = ref(false)
const onRefresh = () => {
  // 清空首页的所有数据
  indexData.value = {}
  // 清空商品信息
  productsData.value = []
  // 页码还原
  page = 1
  // 将 loading 设置为 false，表示不在加载中
  loading.value = false
  // 将 finished 设置为 false，表示没有加载完毕
  finished.value = false
  // 重新加载数据 首页所有信息 商品信息
  initIndexData()
  initProducts()
};

</script>
<style lang='scss' scoped>
.home-main{
  .my-swipe img{
    width: 100%;
    height: 170px;
  }
}

:deep(.van-notice-bar__content){
  display: flex;
  align-items: center;
}
.notice-swipe {
    height: 40px;
    line-height: 40px;
  }
</style>